<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件绑定</title>
</head>
<body>
<div id="example">
    <p>INFO:{{ message }}</p>
    <input type="text" v-model="message" placeholder="edit me">
    <!-- checkbox-->
    <br>
    <input type="checkbox" id="jack" value="jack" v-model="showName">
    <label for="jack">jack</label>
    <input type="checkbox" id="lee" value="lee" v-model="showName">
    <label for="lee">lee</label>
    <p>ShowName:{{showName | json}}</p>
    <!-- radio-->
    <input type="radio" id="one" value="one" v-model="picked">
    <label for="one">one</label>
    <input type="radio" id="two" value="two" v-model="picked">
    <label for="two">two</label>
    <p>picked:{{picked}}</p>
    <!-- select-->
    <select v-model="selected" multiple>
        <option selected>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>select:{{selected | json}}</p>
    <!-- 动态选项，用v-for渲染-->
    <select v-model="selected1">
        <option v-for="option in options" v-bind:value="option.value">
            {{option.text}}
        </option>
    </select>
    <p>select1:{{selected1}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
    var form = new Vue({
        el: '#example',
        data: {
            message: 'li',
            showName: [],
            picked: '',
            selected: [],
            selected1: 'A',
            options: [
                {text: 'one', value: 'A'},
                {text: 'two', value: 'B'},
                {text: 'three', value: 'C'}
            ]
        }
    });
</script>
</body>
</html>